{{ header }}
<div id="specialMore">
    <div class="product-header">
        <h2>{{ heading_title }}</h2>
        <a href="{{ home }}" class="back"><i class="iconfont icon-flow"></i></a>
    </div>
    <div class="product-content">
        <div id="countdown">
            {#<span>倒數</spa n><span class="kill-number">10</span><span>:</span><span class="kill-number">51</span><span>:</span><span class="kill-number">45</span><span>結束</span>#}
        </div>
        {% for product in products %}
        <a  href="{{ product.href }}" class="product-list">
            <img class="image" src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}"/>
            <div class="product-info">
                <div class="product-name">{{ product.name }}</div>
                <div class="product-btn">
                    <div class="product-price">
                        {% if product.price %}
                            <p class="price">
                                {% if not product.special %}
                                    {{ product.price }}
                                {% else %}
                                    {{ product.special }}
                                {% endif %}
                            </p>
                            <div class="product-progress">
                                {#100 - (銷量/庫存*100)#}
                                <div class="progress-color" style="left: -{{ 100-(product.sales_volume/product.quantity*100) }}%"></div>
                                <span>{{ product.sales_volume }} SOLD</span>
                            </div>
                        {% endif %}
                    </div>
                    <button>購買</button>
                </div>
            </div>
        </a>
        {% endfor %}
    </div>
    <input type="hidden" value="{{ date_end }}" id="home_date_end">
    <input type="hidden" value="{{ date_now }}" id="home_date_now">
</div>
<script>
    $(function () {
        countdown($('#home_date_now').val(), $('#home_date_end').val());
    });
    // 倒计时
    function countdown(startTime, endTime) {
        var allTime = endTime - startTime;
        var timer = setInterval(function () {
            if(allTime <= 0){
                $('#countdown').empty();
                clearInterval(timer);
                return false;
            }
            var h = Math.floor(allTime/3600);
            var m = Math.floor((allTime%3600)/60);
            var s = (allTime%3600)%60;
            if(h > 99){
                h = 99;
            }
            if(h < 10){
                h = '0' + h;
            }
            if(m < 10){
                m = '0' + m;
            }
            if(s < 10){
                s = '0' + s;
            }
            var tag = '<span class="kill-number">' + h + '</span><span class="kill-number">' + m + '</span><span class="kill-number">' + s + '</span>';
            $('#countdown').html(tag);
            allTime --;
        },1000)
    }
</script>
